<template>
	<view class="page">
		<view class="title">
			5.1.响应式单位rpx及搭配使用UI产品工具
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://uniapp.dcloud.net.cn/tutorial/syntax-css.html" text="CSS"
				color="#007BFF"></uni-link>
		</view>
		<view class="p" style="width: 450rpx;">
			rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx
			恰好为屏幕宽度。简单理解就是你的设计图为750PX时候，DOM宽度假设为450px，写样式的时候就是450rpx,可以实现半响应式。
		</view>
		<view class="p">
			为什么说是半响应式，当H5端PC页面宽度大于960px后，默认的根HTML font-size为16px。rem的计算格式是 html的font-size16px *
			rem值。当某个view宽度为450rpx时，默认获得的rem值为
			450/16/2 = 14.0625rem, 在PC端这个view 的宽度就只有 14.0625*16 = 225px。如果想让此view 也像移动端一样占比
			450/750。则需要看看你想设置的网页宽度为多少。假设网页口宽度为 1920px, 则设置此view的实际宽度应该是 1920*450/750 = 1152
			，需要达到这个宽度那么HTML的font-size值应该是 1152/14.0625 = 81.92px,
		</view>
		<view class="p">
			这时候就需要在公用的CSS里面加上
			@media (min-width:992px) {
			html {
			font-size: 81.92px !important
			}
			}
		</view>
		<view class="p">
			这时候就发现很多行高或者字体大小都变得无比大，需要做二次处理，把大部分的字体全部改为px.所以最终的建议是uniapp不适合做PC项目（貌似是废话）,也或者从一开始就直接用px做基准，不考虑移动端。
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
</script>

<style lang="scss" scoped>

</style>